<template>
  <a-spin :spinning="spinning">
    <div class="updateInformation">
      <div class="top-conent">
        <title-name title="调整信息"></title-name>
        <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <custom-form :formList="formList" :form="form" :is-emit="false" :editModel="editModel == 0 ? '' : ''">
            <template #fileInfos>
              <file-link :fileList="form.fileInfos" style="margin-top: -3px"></file-link>
            </template>
          </custom-form>
        </a-form-model>
        <div class="nav-wrapper">
          <p class="unit">单位：元</p>
          <a-tabs default-active-key="1" @change="getTabChange" v-model="currentStep">
            <a-tab-pane key="1" tab="三算对比分析表">
              <!-- <a-button type="primary" @click="setSecondaryAccount" style="margin-bottom: 10px"> 展示二级科目 </a-button> -->
              <ux-grid
                ref="tableOne"
                height="500"
                show-overflow
                :tree-config="{
                  children: 'children',
                  expandAll: false,
                  iconOpen: 'el-icon-arrow-down',
                  iconClose: 'el-icon-arrow-right'
                }"
                row-id="id"
                border
                :row-height="35"
              >
              <ux-table-column v-for="item in columns" :key="item.dataIndex" :field="item.dataIndex" :title="item.title" :width="item.width" :fixed="item.fixed" :tree-node="item.dataIndex === 'name'" align="left">
                  <template v-slot="{ row }">
                    <p v-if="(row.yearMonths || []).findIndex((el) => el.key === item.dataIndex) >= 0">
                      {{row.detailValues[item.dataIndex]  | setPlaceholder }}
                    </p>
                    <p v-else-if="(item.dataIndex === 'actualAmount'|| item.dataIndex === 'targetAmount')">{{row[item.dataIndex] | setPlaceholder}}</p>
                    <Ellipsis v-else :length="40" tooltip>{{ row[item.dataIndex]}}</Ellipsis>
                  </template>
                </ux-table-column>
              </ux-grid>
            
            </a-tab-pane>
            <a-tab-pane key="2" tab="目标成本月度分解表" force-render>
              <ux-grid
                ref="tableTwo"
                height="500"
                show-overflow
                :tree-config="{
                  children: 'children',
                  expandAll: false,
                  iconOpen: 'el-icon-arrow-down',
                  iconClose: 'el-icon-arrow-right'
                }"
                row-id="id"
                border
                :row-height="35"
              >
                <ux-table-column v-for="item in columnsTwo" :key="item.dataIndex" :field="item.dataIndex" :title="item.title" :width="item.width" :fixed="item.fixed" :tree-node="item.dataIndex === 'name'" align="left">
                  <template v-slot="{ row }">
                    <p v-if="(row.yearMonths || []).findIndex((el) => el.key === item.dataIndex) >= 0">
                      {{ row.detailValues[item.dataIndex] | setPlaceholder }} 
                    </p>
                    <Ellipsis v-else :length="40" tooltip>{{ row[item.dataIndex]| setPlaceholder }}</Ellipsis>
                  </template>
                </ux-table-column>
              </ux-grid>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    </div>
    <div class="btn_box page-btn-right-top">
      <a-button @click="handleActiveClose" v-if="isAudit">返回</a-button>
      <a-button @click="goBack" v-else>返回</a-button>
    </div>
  </a-spin>
</template>
  <script>
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import { getDetail } from '@/api/businessAffairs/updateInformation'
import { UxGrid, UxTableColumn } from 'umy-ui'
import { Ellipsis } from '@/components'
import { publicMixin } from '../public'
import { placeholder } from '../../../../headquartersDashboard/components/placeholderWay.js'
const columns = [
  {
    title: '序号',
    width: 100,
    align: 'center',
    dataIndex: 'sortNumStr',
    fixed:'left',
  },
  {
    title: '项目名称',
    width: 250,
    dataIndex: 'name',
    fixed:'left',
  },
  {
    title: '成本科目编码',
    width: 200,
    dataIndex: 'code',
    fixed:'left',
  },
  {
    title: '标准成本',
    width: 200,
    dataIndex: 'actualAmount',
    fixed:'left',
  },
  {
    title: '目标成本',
    width: 180,
    dataIndex: 'targetAmount',
    fixed:'left',
  },
  {
    title: '节点开始时间',
    width: 180,
    dataIndex: 'startTime'
  },
  {
    title: '节点考核时间',
    width: 150,
    dataIndex: 'endTime'
  },
  {
    title: '备注',
    width: 300,
    ellipsis: true,
    dataIndex: 'description'
  }
]
export default {
  name: 'updateInformation',
  mixins: [publicMixin], //混入文件
  extends: new BaseEditPage(),
  components: {
    UxGrid,
    UxTableColumn,
    Ellipsis
  },
  data() {
    this.columns = columns
    return {
      // 当前进度
      spinning: false,
      visible: false,
      form: {},
      editModel: 0,
      id: '',
      currentStep: '1',
      gData: [],
      columnsTwo: [
        {
          title: '序号',
          width: 100,
          align: 'center',
          dataIndex: 'sortNumStr',
          fixed:'left',
        },
        {
          title: '项目名称',
          width: 250,
          fixed:'left',
          dataIndex: 'name',
          fixed:'left',
        },
        {
          title: '成本科目编码',
          width: 200,
          fixed:'left',
          dataIndex: 'code',
          fixed:'left',
        },
        {
          title: '目标成本',
          width: 150,
          fixed:'left',
          dataIndex: 'targetAmount',
          fixed:'left',
        }
      ],
      // 动态表头
      activeColumns: []
    }
  },
  props: {
    isAudit: {
      // 是否作为审批详情
      type: Boolean,
      default: false
    }
  },
  filters:{
    setPlaceholder(val){
      return placeholder(val)
    }
  },
  computed: {
    formList() {
      return [
        {
          keyName: 'content',
          type: 'BaseTextarea',
          disabled: true,
          label: '调整内容',
          span: 24
        },
        {
          slot: true,
          keyName: 'fileInfos',
          label: '调整线下审核资料',
          span: 24,
          businessCode: 'FACE12'
        }
      ]
    }
  },
  mounted() {
    this.id && this.getDetailFn()
  },
  methods: {
      //展开二级科目
      setSecondaryAccount() {
      this.getDetailFn(false)
    },
    //设置展示二级科目
    setSecondary(data) {
      if (data && data.length) {
        data.forEach((item) => {
          if (item.isShow) {
            this.$refs.tableOne.setTreeExpand(item, true)
          }
          if (item.children && item.children.length) {
            this.setSecondary(item.children)
          } else {
            item.children = null
          }
        })
      }
      return data
    },
    //获取详情
    getDetailFn(flag) {
      this.spinning = true
      this.gData = []
      let req = { id: this.id }
      if (this.currentStep * 1 === 1) {
        req.isHide = false
        if (flag === false) {
        req.isShow = false
      }
      } else {
        req.isHide = true
      }
      getDetail(req)
        .then((res) => {
          if (res.code == '0') {
            this.form = { ...this.form, ...res.data }
            this.spinning = false
            this.gData = this.IterationDelateMenuChildren(res?.data?.trees || [])
            if (this.currentStep * 1 === 2 && res.data.yearMonths?.length) {
              this.activeColumns = res.data.yearMonths.map((el) => {
                return {
                  title: el.title,
                  width: 150,
                  dataIndex: el.key
                }
              })
              let descriptionArr = [ {title: '备注',dataIndex: 'description',width: 300,ellipsis: true,}]
              this.columnsTwo = [...this.columnsTwo, ...this.activeColumns,...descriptionArr];
              this.$nextTick(() => {
               this.summation(this.gData,this.activeColumns)
              this.reloadData(this.gData,'tableTwo')
            })
              // this.reloadData(this.gData,'tableTwo')
            }else{
              this.reloadData(this.gData,'tableOne')
            }
          }
        })
        .catch((err) => {
          this.spinning = false
        })
    },
    getTabChange(val) {
      this.currentStep = val
      this.getDetailFn()
    },
    //删除children为空的数据
    IterationDelateMenuChildren(arr) {
      if (arr.length) {
        for (let i in arr) {
          if (arr[i].children.length) {
            this.IterationDelateMenuChildren(arr[i].children)
          } else {
            delete arr[i].children
          }
        }
      }
      return arr
    },
    flattenTree(tree) {
      for (let i = 0; i < tree.length; i++) {
        this.dataMap.set(tree[i].id, tree[i])
        if (tree[i]?.childTree && tree[i].childTree?.length > 0) {
          this.flattenTree(tree[i].childTree)
        }
      }
    },
        /**
     * @description: 加载数据
     * @param {array} data
     * @return {void}
     */
     reloadData(data,tableRef) {
      // 获取之前展开数据
      const expandRecords = this.$refs[tableRef].getTreeExpandRecords()
      // 获取之前滚动高度
      const scroll = this.$refs[tableRef].tableExample().getScroll()
      // 加载数据
      this.$refs[tableRef].reloadData(data).then(() => {
        // 数据加载完成出现之后，打开之前的展开行
        this.setSecondary(data)
        // expandRecords.forEach((row) => {
        //   this.$refs[tableRef].setTreeExpand(row, true)
        // })
        this.$refs[tableRef].pagingScrollTopLeft(scroll.scrollTop, scroll.scrollLeft)
      })
    },
    goBack(){
      this.$multiTab.close()
    }
  },
 
}
</script>
  <style lang="less" scoped>
@deep: ~'>>>';
.updateInformation{
  @{deep}{
    .top-conent{
      padding: 15px;
      background-color: #fff;
    }
    .content{
      height: 500px;
      padding: 15px;
      background-color: #fff;
    }
  }
  .nav-wrapper{
    position: relative;
    .unit{
    position: absolute;
    right: 20px;
    top:14px;
  }
  }
}

.page-wrapper {
  height: calc(100% - 123px);
}
@{deep} .ant-tabs-content .plTableBox {
  .el-table td {
    padding: 5px 0;
  }
  .el-table th {
    padding: 5px 0;
    height: 35px;
  }
}
@{deep} .elx-table .elx-header--column.col--ellipsis,
@{deep} .elx-table.border--full .elx-table--fixed-left-wrapper .elx-body--column {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  height: 35px !important;
}
@{deep} .elx-table .elx-body--column.col--ellipsis>.elx-cell, .elx-table .elx-footer--column.col--ellipsis>.elx-cell, .elx-table .elx-header--column.col--ellipsis>.elx-cell {
  height: 35px !important;
  max-height: 35px !important;
  line-height: 35px !important;
}
@{deep} .elx-table .elx-body--column.col--ellipsis, .elx-table .elx-footer--column.col--ellipsis,
@{deep} .elx-table .elx-header--column.col--ellipsis, .elx-table.elx-editable .elx-body--column {
  height: 35px !important;
}
.updateInformation {
  // margin: 20px 10px 20px 20px;
  @{deep} {
    .top-conent {
      padding: 15px;
      background-color: #fff;
    }
    .content {
      height: 700px;
      padding: 15px;
      background-color: #fff;
    }
  }
}
.btn_box{
    right: 4%;
  }
</style>
